<template>
    <div class="tip-popup" v-show="isShow" :style="{ zIndex: curLevel + 1 }" @click="onClick">
        <div class="tip-context">
            <slot></slot>
        </div>
    </div>
</template>

<script setup>
    import {useCoverPopup, useCoverPopupShow} from '../../hooks/cover-popup';

    import { ref } from 'vue';

    const [ curLevel, addLevel, subLevel ] = useCoverPopup();
    const [ , showCoverPopup, hideCoverPopup ] = useCoverPopupShow();

    const onClick = () => {
        hide();
    }

    const isShow = ref(false)

    const show = () => {
        addLevel();
        showCoverPopup();
        isShow.value = true;
    }

    const hide = () => {
        subLevel();
        hideCoverPopup();
        isShow.value = false;
    }

    // 使用 defineExpose 将方法暴露给外部
    defineExpose({
        show,
        hide
    });
</script>

<style lang="scss" scoped>
    .tip-popup { 
        position: fixed;
        top: 0;
        left: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100vw;
        height: 100vh;

        .tip-context { 
            width: 100px;
            height: 100px;
            background: red;
        }
    }
</style>